<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市区</title>
    <script src="./Vue.js"></script>

</head>
<body>
    <div id="box">
        <select v-model="province">
            <option value="">请选择</option>
            <option v-for="item in provinces" v-bind:value="item">{{item}}</option>
        </select>
        <select v-model="city">
            <option value="">请选择</option>
            <option v-for="item in citys" v-bind:value="item">{{item}}</option>
        </select>
        <select v-model="district">
            <option value="">请选择</option>
            <option v-for="item in districts" v-bind:value="item">{{item}}</option>
        </select>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el : '#box',
            data : {
                   province : '',
                city : '',
                district : '',
                addressData : {
                    '黑龙江省' : {
                        '哈尔滨市' : {
                            "道里区" : {},
                            "南岗区" : {}
                        },
                        '齐齐哈尔市' : {
                            '龙沙区' : {},
                            '建华区' : {}
                        }
                    },
                    '吉林省' : {
                        '长春市' : {
                            '朝阳区' : {},
                            '南关区' : {}
                        },
                        '吉林市':{
                            '船营区' : {},
                            '龙潭区' : {}
                        }
                    },
                    '辽宁省' : {
                        '沈阳市' : {
                            '和平区' : {},
                            '沈河区' : {}
                        },
                        '大连市' : {
                            '中山区' : {},
                            '金州区' : {}
                        }
                    }
                }
            },
            watch : {
                province : function(newValue,oldValue){
                    if(newValue !== oldValue){
                        this.city = '';
                    }
                },
                city : function(newValue,oldValue){
                        if(newValue !== oldValue){
                        this.district = '';
                    }
                }
            },
            computed : {
                provinces : function(){
                    if(!this.addressData){
                        return;
                    }
                    var pArr = [];
                    for(var key in this.addressData){
                        pArr.push(key);
                    }
                    return pArr;
                },
                citys : function(){
                    if(!this.addressData || !this.province){
                        return;
                    }
                    var cArr = [];
                    for(var key in this.addressData[this.province]){
                        cArr.push(key);
                    }
                    return cArr;
                },
                districts : function(){
                    if(!this.addressData || !this.city){
                        return;
                    }
                    var dArr = [];
                    for(var key in this.addressData[this.province][this.city]){
                        dArr.push(key);
                    }
                    return dArr;
                }
            }
        });
    </script>
    
</body>
</html>